<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.content{
				height: 130px;
				width: 380px;
				/* background: gray; */
				margin-top: 10px;
			}
			.mainleft{
				height: 130px;
				width: 80px;
				display: block;
				float: left;
			}
			.mainleft img{
				width: 100%;
				height: 100%;
			}
			
			.mainright{
				width:280px;
				height: 100%;
				float: left;
				margin: 0 10px;
			}
			.title{
				height: 20px;
				width: 100%;
			}
			.title .em{
				float: right;
				font-style: normal;
				color: red;
			}
			
			.mainright .con{
				height: 40px;
				width: 100%;
				margin-top: 10px;
			}
			.mainright .con{
				/* 文字超出部分用...显示 */
				text-overflow: ellipsis;
			}
			
			.mainright .desc{
				height: 20px;
				width: 200px;
				margin-top: 30px;
				/* background-color: #808080; */
			}
			
			.mainright .desc div img{
				height: 20px;
				width: 20px;
				float: left;
			}
			
			.mainright .desc .ou{
				height: 20px;
				width: 90px;
				float: left;
				margin-left: 5px;
				line-height: 20px;
				color: red;
			}
			
			.box{
				width: 400px;
				height: 400px;
				/* background: ghostwhite; */
				margin: 30px 30px;
			}
			
			.box .box1{
				width: 150px;
				height: 150px;
				padding: 10px;
				border: 10px solid #dadfe7;
				float: left;
				overflow: hidden;
			}
			
			.box1 .a{
				
				float: left;
			}
			.box1 .b{
				float: left;
			}
			.box1 .neirong{
				width: 70%;
				height: 130px;
				/* background: greenyellow; */
				float: left;
				/* padding-top: 5px; */
			}
			.box1 .logo{
				width:40px;
				height: 40px;
				float: right;
				padding-bottom: 0;
			}
			.box1 .logo img{
				width:40px;
				height: 40px;
				
			}
			.box1 span{
				display: block;
				height: 20px;
				width: 100%;
				padding-bottom:10px;
				font-weight: bold;
				font-size: 18px;
			}
			/* .clear{
				clear: both;
			} */
			.box1 .logo{
				margin-top:80px;
			}
		</style>
	</head>
	<body>
		<!-- 第一部电影 -->
		<div class="content">
			<div class="mainleft">
				<img src="img/timg.jpg" alt="">
			</div>
			<div class="mainright">
				<div class="title">
					<b>环太平洋</b>
					<em class="em">468人浏览过</em>
				</div>
				
				<div class="con">
					<span>#环太平洋##环太平洋#</span>对影建筑物的倒塌、核弹攻击城市，外星人入侵。。。
					<a href="https://movie.douban.com/subject/5323968/" style="color:orangered">[详细]</a>
				</div>
				<div class="desc">
					<div><img src="img/logo.jpg" alt=""></div>
					<span class="ou">欧美电影</span>
				</div>
				
			</div>
		</div>
		<!-- 第二部电影 -->
		<div class="content">
			<div class="mainleft">
				<img src="img/sudu.jpg" alt="">
			</div>
			<div class="mainright">
				<div class="title">
					<b>速度与激情6</b>
					<em class="em">783人浏览过</em>
				</div>
				
				<div class="con">
					<span>【杰森·斯坦森确定加盟#速#】斯坦森饰演第六部大反派欧文·肖。。。
					<a href="https://movie.douban.com/subject/6537500/" style="color:orangered">[详细]</a>
				</div>
				<div class="desc">
					<div><img src="img/logo.jpg" alt=""></div>
					<span class="ou">欧美电影</span>
				</div>
				
			</div>
		</div>
		<!-- 第三部电影 -->
		<div class="content">
			<div class="mainleft">
				<img src="img/timg%20(1).jpg" alt="">
			</div>
			<div class="mainright">
				<div class="title">
					<b>青春派</b>
					<em class="em">97人浏览过</em>
				</div>
				
				<div class="con">
					<span>《青春派》预告片 “零差评” 其亿增长。。。
					<a href="https://movie.douban.com/subject/24735062/" style="color:orangered">[详细]</a>
				</div>
				<div class="desc">
					<div><img src="img/logo.jpg" alt=""></div>
					<span class="ou">欧美电影</span>
				</div>
				
			</div>
		</div>
		
		<!-- 题二 -->
		<div class="box">
			<div class="box1 a">
				<span>采购</span>
				<div class="neirong"><p>有创意的想法和充满欲望的开创未来联合聘用人才。。</p></div>
			    <div class="logo">
					<img src="img/a.png" alt="">
                </div> 
			</div>
			<div class="box1 b">
				<span>招聘信息</span>
				<div class="neirong"><p>基于多年的社区能力的经验，充分发挥聘请人才。。</p></div>
				<div class="logo">
					<img src="img/b.png" alt="">
				</div> 
			</div>
			<div class="box1 c">
				<span>文员</span>
				<div class="neirong"><p>所有营的工作人员总是在一起，可以是个称职员工。。</p></div>
				<div class="logo">
					<img src="img/c.png" alt="">
				</div> 
			</div>
			<div class="box1 d">
				<span>呼叫中心坐席</span>
				<div class="neirong"><p>客户需要伸出援助之手，每当你使用一个代理来。。</p></div>
				<div class="logo">
					<img src="img/d.png" alt="">
				</div>
				<!-- <div class="clear"></div> -->
			</div>
		</div>
	</body>
</html>
